<template>
  <div ref="content" class="bgWhite">
    <el-form ref="form">
      <el-select v-model="searchForm.name.value" filterable clearable placeholder="菜单名称" @keyup.enter.native="getTableList" @focus="getMenuName">
        <el-option v-for="item in menuNameList" :key="item.id" :value="item.label" :label="item.label"></el-option>
      </el-select>
    </el-form>
    <div class="btnContainer" ref="btn">
      <div>
        <el-button type="search" @click="closeAddDialog" v-if="$_has('/front_menu/add')">添加</el-button>
        <el-button type="del" @click="sureCloseDelDialog" v-if="$_has('/front_menu/del')">删除</el-button>
      </div>
      <div>
        <el-button type="search" @click="getTableList" v-if="$_has('/front_menu/list')">查询</el-button>
        <el-button type="del" @click="resetForm" >重置</el-button>
      </div>
    </div>
    <el-table id="tableMenu" ref="table" :data="listTable" :height="tableH" :row-class-name="rowClassName"
      @selection-change="handleSelectionChange"  @select="selectRow" @select-all="selectAll" @row-click="RowClick"
      :row-key="row_key" :expand-row-keys="expandRowKeys" v-loading="loading"
     :tree-props="{children: 'childlist', hasChildren: 'hasChildren'}" >
    
      <el-table-column type="selection" width="55"  fixed="left"  :reserve-selection="true"></el-table-column>
      <el-table-column  label="菜单名称"  width="320" prop="name"  align="left"></el-table-column>
      <el-table-column  label="图片" width="276"   prop="image" class-name="tdImage">
        <template slot-scope="scope" >
          <el-image  :preview-src-list="scope.row.array_image" :src="scope.row.image"  v-if="scope.row.image" ></el-image>
        </template>
      </el-table-column>
      <el-table-column  label="地址" width="276"  prop="path" align="left"></el-table-column>
      <el-table-column  label="启用状态"  width="128" prop="status">
         <template slot-scope="scope" @click.stop>
          <el-switch  v-model="scope.row.statusBoolean" :disabled="!$_has('/front_menu/status_switch')" @change="changeMenuStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="创建人"  prop="create_name"></el-table-column>
      <el-table-column  label="操作" fixed="right"  width="160" class-name="options" >
        <template slot-scope="scope">
          <i class="iconfont  icon-grade_normal" :style="(scope.row.childlist && scope.row.childlist.length > 0 )?'opacity:1':'opacity:0' "   @click.stop="toogleExpand(scope.row)"></i>
          <i class="iconfont  icon-edit_normal" v-if="$_has('/front_menu/edit')"  @click.stop="setCurRow(scope.row, 'edit')"></i>
          <i class="iconfont  icon-delete_normal" v-if="$_has('/front_menu/del')"  @click.stop.prevent="setCurRow(scope.row, 'del')" ></i>
        </template>
      </el-table-column>
    </el-table>
    <Add v-show="addShow" :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Edit v-show="editShow"  :id="curId" :show="editShow" @closeDialog="closeEditDialog"></Edit>
    <Del v-show="delShow" :idList="curList" :show="delShow" @closeDialog="closeDelDialog"></Del>
  </div>
</template>

<script>
import { Add, Edit, Del } from './components'
import { frontMenuList, frontMenuNameList, frontMenuStatusChange } from '@/api/front/frontMenu.js'
import { setSearchParams, appendStatus, fileDomain } from '@/utils/index.js'

export default {
  name: 'front_menu',
  data(){
    return {
      menuName:"",
      listTable:[],
      addShow: false,
      editShow: false,
      delShow: false,
      searchForm:{
        name:{value:'',op:'='},
      },
      menuNameList: [],
      curId: null,
      curList: [],
      tableH: null,
      expandRow: [],
      selectList: [] ,
      allSelectList: [],
      isSelect: true,
      rowClick: false,
      expandRowKeys: [],
      loading: false,
      domain: ''
    }
  },
  components:{ Add, Edit, Del },
  created() {
    this.getTableList()
  
  },
  mounted(){
    let that = this
    that.setTableHeight()
      // 注：window.onresize只能在项目内触发1次
    window.onresize = function windowResize () {
        // 通过捕获系统的onresize事件触发我们需要执行的事件
      that.setTableHeight()
    }
  },
  methods: {
    RowClick (row) {
      this.$refs.table.toggleRowSelection(row);
    } ,
    selectAll(){ 
      this.isSelect = !this.isSelect
      this.rowClick = false
    },
    row_key(row){
      return row.id
    },
    setTableHeight(){
      let searchFormH = this.$refs.form.$el.offsetHeight;
      let manageMenuH = this.$refs.content.offsetHeight;
      let btnContainerH = this.$refs.btn.offsetHeight;
      let tableHeight = manageMenuH  - btnContainerH - searchFormH - 48 - 24 - 24
      this.tableH = tableHeight +'px'
    },
    getMenuName(){
      frontMenuNameList().then(res=>{
        this.menuNameList = res.data
      })
    },
    getTableList() {
      this.loading = true
      let params = setSearchParams(this.searchForm)
      frontMenuList(params).then(res=>{
        let list = res.data.rows

        this.listTable = this.appendImage(list)
        this.listTable =  appendStatus(list)   
        this.$refs.table.clearSelection()   
        this.expandRowKeys = [] 
        this.loading = false
      })
    },
    appendImage(list){
      for(let item in list){
      if(list[item].image){
        list[item].image  = this.utils.setCdnUrl()+list[item].image
        list[item].array_image = [list[item].image]
      }else{
        list[item].array_image = []
      }
      if(list[item].childlist && list[item].childlist.length>0){
        this.appendImage(list[item].childlist)
      }
    }
    return list
    },
    setExpandRow(list){
      for(let i = 0; i < list.length; i++){
        if(list[i].is_menu == 1){
          // this.expandRow.push(list[i])
          this.$refs.table.toggleRowExpansion(list[i], true)
        }
        if(list[i].childlist.length > 0) {
          this.setExpandRow(list[i].childlist)
        }
      }
    },
    closeAddDialog(){
      this.addShow = !this.addShow
      if(!this.addShow){
        this.getTableList()
      }
    },
    closeDelDialog(){
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getTableList()
      }
    },
    closeEditDialog(){
      this.editShow = !this.editShow
      if(!this.editShow){
        this.getTableList()
      }
    },
    sureCloseDelDialog(){
      if(this.curList.length > 0){
        this.closeDelDialog()
      } else {
        this.$message.error('请选择需删除的选项！')
      }
      
    },
    rowClassName({row}){
      let rowClass = "tableRowClass"
      if(!row.statusBoolean){
        rowClass += ' unchecked'
      }
      if(row.statusSelection){
        rowClass += ' selectRow'
      }
      if(row.childlist && row.childlist.length > 0){
        rowClass += ' notMenu'
      }
      if(!(row.childlist && row.childlist.length >0)){
         rowClass += ' noChild'
      }
      return rowClass
    },
    setCurRow(row,type) {
      this.curList = []
      this.curList.push(row.relatetion_id)
      this.curId = row.relatetion_id
      if(type === 'edit'){
        this.closeEditDialog()
      }else if(type === 'del'){
        this.closeDelDialog()
      }
    },
    changeMenuStatus(row){
      let params= {}
      params.relatetion_id = row.relatetion_id
      if(row.statusBoolean){
        params.status = 'normal'
      }else{
        params.status = 'hidden'
      }
      frontMenuStatusChange(params).then(res=>{
        if(res.state == 1){
          this.$message.success('修改状态成功')
          this.getTableList()
        } 
        this.getTableList()
      })
    },
    resetForm(){
      for(let item in this.searchForm){
        this.searchForm[item].value =""
      }
      this.getTableList()
    },
    handleSelectionChange(list){
      let array = []
      for(let i = 0; i < list.length; i++ ){
        array.push(list[i].relatetion_id)
        if(!this.rowClick){
          this.toggleRowSelection(list[i], this.isSelect)
        }
      }
      this.curList = array
      // 选中行的样式赋值
      for(let i in this.selectList){
        this.selectList[i].statusSelection = false
      }
      for (let item in list){
        list[item].statusSelection = true
      }
      this.selectList = list
    },
    selectRow(selection, row){
      this.rowClick = true
      this.$refs.table.toggleRowSelection(row, !row.statusSelection)
      this.toggleRowSelection(row, !row.statusSelection)
    },
    toggleRowSelection(row, flag){
      this.$refs.table.toggleRowSelection(row, flag)
      if(row.childlist){
        let childlist = row.childlist
        for(let i = 0; i < childlist.length; i++){
          this.toggleRowSelection(childlist[i], flag)
        }
      }
    },
    toogleExpand(row){
      this.$refs.table.toggleRowExpansion(row)
    }
  }
}
</script>

<style lang="scss">

@import '@/styles/front/frontMenu.scss';


</style>